import styles from './index.module.scss';
import { Button, Form, Input, message } from 'antd';
import FormItem from 'antd/es/form/FormItem';
import { request } from '../../../utils/request';
import { routes } from '../../../routes';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const Register = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [isSend, setIsSend] = useState(false);
  const [sendTime, setSendTime] = useState(60);
  const btnRegister = async (values) => {
    const { username, password, email, code } = values;
    const res = await request('/admin/register', {
      method: 'POST',
      pureData: false,
      data: {
        username,
        password,
        email,
        code
      }
    });
    if (res.code === '1') {
      message.success('注册成功,3秒后自动跳转到首页');
      localStorage.setItem('token', res.data);
      setTimeout(() => {
        navigate(routes.ADMIN_HOME);
      }, 3000);
      return;
    }
    message.error(res.desc);
  };

  const getVerifyCode = async (email) => {
    if (!email) message.error('请输入邮箱');
    setIsSend(true);
    let timer = setInterval(() => {
      setSendTime((prevState) => {
        if (prevState === 0) {
          clearInterval(timer);
          setIsSend(false);
          return 60;
        }
        return prevState - 1;
      });
    }, 1000);

    const res = await request('/admin/register/verify', {
      method: 'POST',
      pureData: false,
      data: {
        email
      }
    });
    if (res.code === '1') {
      message.success('验证码发送成功');
      return;
    }
    message.error(res.desc);
  };

  return (
    <div className={styles.bg}>
      <div className={styles.container}>
        <Form style={{ width: '100%' }} onFinish={btnRegister} form={form}>
          <FormItem
            rules={[{ required: true, message: '请输入账号名/邮箱' }]}
            name={'username'}
            hasFeedback={true}
            className={styles.input}>
            <Input size={'large'} placeholder={'设置登录账号名，注册后不可更改'} />
          </FormItem>
          <FormItem
            rules={[{ required: true, message: '请设置登录密码' }, { min: 6, message: '密码长度不得小于6位' }]}
            name={'password'}
            hasFeedback={true}
            className={styles.input} required={true}>
            <Input size={'large'} placeholder={'设置登录密码'} type={'password'} />
          </FormItem>

          <FormItem
            name={'email'}
            hasFeedback={true}
            rules={[{ required: true, message: '请输入邮箱' }, {
              type: 'email',
              message: '邮箱格式不正确'
            }]}
            className={styles.input} required={true}>
            <Input size={'large'} placeholder={'请输入邮箱'} />
          </FormItem>

          <FormItem
            name={'emailCode'}
            required={true}>
            <FormItem
              name={'code'}
              rules={[{ required: true, message: '请输入邮箱验证码' }]}
              required={true}
            >
              <Input size={'large'} placeholder={'请输入邮箱验证码'} />
            </FormItem>
            {
              isSend ? <Button disabled={true} type={'link'} size={'large'}
                               style={{ position: 'absolute', right: 0, top: 0 }}>已发送{sendTime}s</Button> :
                <Button onClick={() => {
                  getVerifyCode(form.getFieldValue('email'));
                }} type={'link'} size={'large'} style={{ position: 'absolute', right: 0, top: 0 }}>获取验证码</Button>
            }
          </FormItem>

          <FormItem>
            <Button size={'large'} style={{ width: '100%' }} htmlType={'submit'} type={'primary'}>立即开店</Button>
          </FormItem>
        </Form>

        <label style={{ fontSize: '14px', color: '#8c8c8c' }}>已有账号？
          <span onClick={() => navigate(routes.ADMIN_LOGIN)}
                style={{ color: '#3768fa', cursor: 'pointer' }}>立即登录</span></label>

      </div>
    </div>
  );
};
export default Register;